import React from 'react'
import { Popover, NavBar, Icon } from 'antd-mobile';
import './style.scss'
import History from 'lib/history'

export default class RightPopover extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            selected: '',
        };
        this.itemList = [
            { name: '首页', type: 'index', to: '/index/home' },
            { name: '分类搜索', type: 'classification', to: '/index/classification' },
            { name: '购物车', type: 'shoppingCart', to: '/shoppingCart' },
            { name: '我的', type: 'mine', to: '/index/mine' },
            { name: '浏览记录', type: 'history', to: '/history' },
        ]
    }
    onSelect = (opt) => {
        this.setState({
            visible: false,
            selected: opt.props.value,
        });
        History.push(opt.props.to)
    };
    handleVisibleChange = (visible) => {
        this.setState({
            visible,
        });
    };
    getOverlay() {
        return this.itemList.map(value => (
            <Popover.Item key={value.type} value={value.type} to={value.to} icon={<i className={`iconfont icon-${value.type}`}></i>} data-seed="logId">{value.name}</Popover.Item>
        ))
    }
    render() {
        return (
            <Popover
                overlayClassName="fortest"
                visible={this.state.visible}
                overlay={this.getOverlay()}
                overlayStyle={{
                    backgroundColor: '#ffffff',
                }}
                align={{
                    overflow: { adjustY: 0, adjustX: 0 },
                    offset: [0, 10],
                }}
                onVisibleChange={this.handleVisibleChange}
                onSelect={this.onSelect}
            >
                {this.props.children}
            </Popover>
        );
    }
}